<style lang="less" scoped>
.header{
  position: relative;
  .bg{
    filter:blur(28px);
    background-size: cover;
    width:100%;
    height:16em;
    position: absolute;
    z-index: -1;
  }
  
  img{
    width:8em;
    height:12em;
    margin-left:1.2em;
    margin-top:1.5em;
  }
  .info{
    list-style: none;
    margin-top:1.5em;
    margin-left:1em;
    opacity: 0.8;
    li{
      line-height: 1.6em;
    }
    .title{
      font-size: 1.5em;
      margin-bottom: 1em;
    }
  }
}
.chapters{
  font-size: .8em;
  margin-top:1em;
  margin-left: 1em;
  background-color: beige;
  li{
    margin:.4em .5em;
    padding: .4em .8em;
    width:12em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    border:1px solid #ccc;
    float: left;
  }
}
.last{
  margin-top: 1em;
  font-size: .9em;
  dd{
    width:12em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
<template>
  <div>
    <div class="header ub">
      <div class="bg" :style="{backgroundImage: 'url('+topic.avatar+')'}"></div>
      <img :src="topic.avatar" alt="">
      <ul class="info">
        <li class="title">{{topic.name}}</li>
        <li>{{topic.author}}</li>
        <li>更新：{{topic.update_at}}</li>
        <li class="last">
          <dl>
            <dt>上次看到：</dt>
            <dd>
              <nuxt-link :to="'/chapters/'+lastChapter.cid">{{lastChapter.title}}</nuxt-link>
            </dd>
          </dl>
        </li>
      </ul>
    </div>
    <ul class="chapters">
      <li v-for="(x,i) of chapters" :key="i">
         <nuxt-link :to="'/chapters/'+x.cid">{{x.title}}</nuxt-link>
      </li>
    </ul>
  </div>
</template>
<script>
let topic_code='dpcq'
export default {
  async asyncData({ params, app }) {
    let { data } = await app.$api.get(`/topics/${topic_code}`);
    let topic = data.itemMap.topic;
    let { data:data2 } = await app.$api.get(`/topics/${topic_code}/chapters`);
    let chapters=data2.items
    return { topic,chapters };
  },
  data(){
    return {
      lastChapter:{}
    }
  },
  mounted(){
    if(window.localStorage.curChapter)
      this.lastChapter=JSON.parse(window.localStorage.curChapter)
    
  },
  methods: {
   
  }
};
</script>
